<template>
  <el-tree
    :props="defaultProps"
    lazy
    :load="treeLoadNode"
    accordion
    @node-click="handleNodeClick"
    class="tree_box"
    v-loading="loading"
  >
    <span slot-scope="{ node }">
      <el-tooltip
        effect="dark"
        placement="top-start"
        v-show="node.data.value === null || node.data.value.length > 12 ? true : false"
      >
        <div slot="content">{{ node.data.value }}</div>
        <span
          :class="node.data.value === null || node.data.value.length > 12 ? 'usersNumber2' : ''"
        >{{ node.data.value }}</span>
      </el-tooltip>
      <span
        v-show="node.data.value === null || node.data.value.length > 12 ? false : true"
      >{{ node.data.value + `(${node.data.SL})` }}</span>
    </span>
  </el-tree>
</template>
<script>
import { ziC } from '@/utils/allUrl.js'
// import { getUrl } from '@/utils/getUrl.js'
export default {
  props: ['treesBox'],
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label',
        isLeaf: 'leaf'
      },
      loading: false,
      isOks: null
    }
  },
  //   watch: {
  //     treesBox: {
  //       // 正确给 cData 赋值的 方法
  //       deep: true,
  //       handler: function(newVal, oldVal) {
  //       }
  //     }
  //   },
  created() {},
  methods: {
    // 选择辖区或者资产分组
    handleNodeClick(e) {
      this.$emit('handleNodeClick', {
        type: e
      })
    },
    async treeLoadNode(node, resolve) {
      this.loading = true
      this.isOks = setTimeout(() => {
        this.loading = false
      }, 10000)
      if (node.level === 0) {
        return resolve(await this.getuserCitys(1))
      }
      if (node.level > 3) return resolve([])
      resolve(await this.getuserCitys(node.level + 1, node.label))
    },
    async getuserCitys(bmNum, bm) {
      const { url } = this.treesBox
      //   const user = JSON.parse(getUrl('userconter'))
      const params = new URLSearchParams()
      if (bm) {
        if (bmNum === 2) {
          params.append('SF', bm)
        } else if (bmNum === 3) {
          params.append('CS', bm)
        } else if (bmNum === 4) {
          params.append('QX', bm)
        }
      }
      //   if (GZKZ) {
      //     params.append('ZCLX_XJ', GZKZ)
      //     params.append('ZCLX_XJ_LIST', JSON.stringify(GZKZ))
      //   }
      //   params.append('CXLX', url)
      //   params.append('userId', user.id)
      params.append('DJ', bmNum)
      const { data: res } = await this.$http.post(`${ziC + url}`, params)
      clearTimeout(this.isOks)
      this.loading = false
      const city = JSON.stringify(res.data)
      const newCity = city.replace(/MC/g, 'value')
      const cityList = newCity.replace(/BM/g, 'label')
      const cityAlls = JSON.parse(cityList).list
      cityAlls.forEach(item => {
        if (item.label.length === 8) {
          item = item.leaf = true
        }
      })
      return cityAlls
    }
  }
}
</script>
<style lang="scss" scoped>
.tree_box {
  margin-top: 10px;
  .usersNumber2 {
    display: flex;
    width: 135px;
    cursor: pointer;
    overflow: hidden;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    white-space: nowrap;
    position: relative;
  }
  .usersNumber2:after {
    content: '...';
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10%;
    height: 1.8em;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
  }
}
</style>
